@include('home.public.css')
<body class="res layout-subpage">

<div id="wrapper" class="wrapper-full ">
    <!-- Main Container  -->
    <div class="main-container container">

        <div class="row">
            <!--Middle Part Start-->
            <div id="content" class="col-md-12 col-sm-12">

                <div class="product-view row quickview-w">
                    <div class="left-content-product">

                        <div class="content-product-left class-honizol col-md-5 col-sm-12 col-xs-12">
                            <div class="large-image  ">
                                <img itemprop="image" class="product-image-zoom"
                                     src="{{$good['pictures'][0]}}"
                                     data-zoom-image="">
                            </div>
                            <a class="thumb-video pull-left" href="javascript:;"><i
                                    class="fa fa-youtube-play"></i></a>

                            <div id="thumb-slider" class="yt-content-slider full_slider owl-drag" data-rtl="yes"
                                 data-autoplay="no" data-autoheight="no" data-delay="4" data-speed="0.6"
                                 data-margin="10" data-items_column0="4" data-items_column1="3" data-items_column2="4"
                                 data-items_column3="1" data-items_column4="1" data-arrows="yes" data-pagination="no"
                                 data-lazyload="yes" data-loop="no" data-hoverpause="yes">
                                @foreach($good->pictures as $picture)
                                <a data-index="0" class="img thumbnail "
                                   data-image="{{$picture}}">
                                    <img src="{{$picture}}">
                                </a>
                               @endforeach
                            </div>

                        </div>

                        <div class="content-product-right col-md-7 col-sm-12 col-xs-12">
                            <div class="title-product">
                                <h1>{{$good['name']}}]</h1>
                            </div>
                            <!-- Review ---->
                            <div class="box-review form-group">
                                <div class="ratings">
                                    <div class="rating-box">
                                        @foreach([1,2,3,4,5] as $k=>$v)
                                            @if($k<=mt_rand(3,5))
                                                <span class=",fa fa-stack">
                                                                <i class="fa fa-star fa-stack-2x"></i>
                                                            </span>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="product-label form-group">
                                <div class="product_page_price price" itemprop="offerDetails" itemscope=""
                                     itemtype="http://data-vocabulary.org/Offer">
                                    <span class="price-new" itemprop="price">¥{{$good['price']}}</span>
                                    <span class="price-old">¥{{$good['price']+mt_rand(20,100)}}</span>
                                </div>
                                <div class="stock"><span>Availability:</span> <span class="status-stock">In Stock</span>
                                </div>
                            </div>

                            <div class="product-box-desc">
                                <div class="inner-box-desc">
                                    <div class="price-tax"><span>Ex Tax:</span> $60.00</div>
                                    <div class="reward"><span>Price in reward points:</span> 400</div>
                                    <div class="brand"><span>Brand:</span><a href="#">Apple</a></div>
                                    <div class="model"><span>Product Code:</span> Product 15</div>
                                    <div class="reward"><span>Reward Points:</span> 100</div>
                                </div>
                            </div>


                            <div id="product">
                                <h4>可用属性</h4>
                                @foreach($good->secondAttr($good->id) as $value)
                                    <div class="image_option_type form-group required">
                                        <label class="control-label">{{$value['name']}}</label>
                                        <ul class="product-options clearfix" id="input-option231">
                                            {{--循环二级属性--}}
                                            @foreach($value['son'] as $item)
                                                <li class="radio {{in_array($item['id'],$product['attributeArr'])?'active':''}}"
                                                    good="{{$item['id']}}">
                                                    <label>
                                                        {{--<input attr="{{$item['id']}}" class="image_radio" type="radio" name="option[231]" value="33">--}}
                                                        <img
                                                            style="border: 2px solid #DDDDDD; padding: 1px;width: 20px;height: 20px; "
                                                            src="{{asset('shop/ico/kongbai.png')}}" alt="">
                                                        <i style="color: black;" class="fa fa-check"></i>
                                                        <label>{{$item['name']}}</label>
                                                    </label>
                                                </li>
                                            @endforeach
                                            {{--二级属性循环结束--}}
                                            <li class="selected-option">
                                            </li>
                                        </ul>
                                    </div>
                                @endforeach
                                <div class="card-body">
                                    <span>库存: {{$product['inventory']}}  </span><span class="inventory"></span>
                                </div>
                                <hr>

                                <div class="form-group box-info-product">
                                    <div class="option quantity">
                                        <div class="input-group quantity-control" unselectable="on"
                                             style="-webkit-user-select: none;">
                                            <label>数量</label>
                                            <input class="form-control" type="text" name="quantity"
                                                   value="1">
                                            <input type="hidden" name="product_id" value="50">
                                            <span class="input-group-addon product_quantity_down">−</span>
                                            <span class="input-group-addon product_quantity_up">+</span>
                                        </div>
                                    </div>
                                    <div class="cart">
                                        <input type="button" data-toggle="tooltip" title="" value="加入购车车"
                                               data-loading-text="Loading..." id="button-cart"
                                               class="btn btn-mega btn-lg" onclick="cartAdd();"
                                               data-original-title="加入购物车">
                                    </div>
                                    <div class="add-to-links wish_comp">
                                        <ul class="blank list-inline">
                                            <li class="wishlist">
                                                @if(!$collect)
                                                    <a href="{{route('collect.clickCollect',$good['id'])}}"
                                                       class="icon" data-toggle="tooltip"
                                                       data-original-title="收藏"><i
                                                            class="fa fa-heart"></i>
                                                    </a>
                                                @else
                                                    <a href="{{route('collect.offCollect',$good['id'])}}"
                                                       class="icon" data-toggle="tooltip"
                                                       data-original-title="取消收藏"><i
                                                            class="fa fa-heart" style="color: red;"></i>
                                                    </a>
                                                @endif
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                            </div>
                            <!-- end box info product -->

                        </div>

                    </div>
                </div>
                @push('js')
                    @include('home.public.addToCart')
                @endpush


            </div>


        </div>
        <!--Middle Part End-->
    </div>
    <!-- //Main Container -->

    <style type="text/css">
        #wrapper {
            box-shadow: none;
        }

        #wrapper > *:not(.main-container) {
            display: none;
        }

        #content {
            margin: 0
        }

        .container {
            width: 100%;
        }

        .product-info .product-view, .left-content-product, .box-info-product {
            margin: 0;
        }

        .left-content-product .content-product-right .box-info-product .cart input {
            padding: 12px 16px;
        }

        .left-content-product .content-product-right .box-info-product .add-to-links {
            width: auto;
            float: none;
            margin-top: 0px;
            clear: none;
        }

        .add-to-links ul li {
            margin: 0;
        }

    </style>
</div>

<!-- Include Libs & Plugins
   ============================================ -->
<!-- Placed at the end of the document so the pages load faster -->
@include('home.public.js')

